<template>
  <div class="flex">
    <VueDraggable
      v-model="list1"
      :animation="150"
      ghostClass="ghost"
      :group="{ name: 'itemList', pull: 'clone', put: false }"
      :clone="clone"
      :sort="false"
    >
      <div v-for="item in list1" :key="item.id" class="item">
        {{ item.name }}
      </div>
    </VueDraggable>
    <VueDraggable v-model="list2" :animation="150" group="itemList" ghostClass="ghost">
      <div v-for="item in list2" :key="item.id" class="item">
        {{ item.name }}
      </div>
    </VueDraggable>
  </div>
  <div class="flex justify-between">
    <!-- <preview-list :list="list1" />
    <preview-list :list="list2" /> -->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'

const list1 = ref([
  {
    name: '张三',
    id: '1748249910926',
  },
  {
    name: '李四',
    id: '1748249918927',
  },
  {
    name: '王五',
    id: '1748249918928',
  },
  {
    name: '赵六',
    id: '1748249918929',
  },
])

const list2 = ref(
  list1.value.map((item) => ({
    name: `${item.name}`,
    id: `${Date.now()}`,
  })),
)

function clone(element: Record<'name' | 'id', string>) {
  return {
    name: `${element.name}`,
    id: `${Date.now()}`,
  }
}
</script>

<style scoped>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.flex {
  display: flex;
  gap: 10px;
}

.item {
  width: 100px;
  padding: 10px;
  background-color: #f0f0f0;
  margin: 10px;
  padding: 10px;
}
</style>
